<template>
  <div class="app-container" style="display: flex; height: 100vh;">
    <!-- 左侧树形结构 -->
    <div style="width: 250px; border-right: 1px solid #ebeef5; padding: 10px;">
      <el-tree
        :data="treeData"
        :props="treeProps"
        node-key="id"
        @node-click="handleNodeClick"
        default-expand-all
        highlight-current
        :expand-on-click-node="false"
      >
        <span slot-scope="{ node, data }">
          <i :class="data.icon" style="margin-right: 5px;"></i>{{ data.label }}
        </span>
      </el-tree>
    </div>

    <!-- 右侧字段配置面板 -->
    <div style="flex: 1; padding: 20px; overflow-y: auto;">
      <el-form :model="form" label-width="100px" size="mini" v-if="activeNode">
        <h3>当前模块：{{ activeNode.label }}</h3>
        <el-form-item label="字段名称">
          <el-input v-model="form.label" placeholder="如：商品名称" />
        </el-form-item>
        <el-form-item label="字段key">
          <el-input v-model="form.key" placeholder="如：product_name" />
        </el-form-item>
        <el-form-item label="字段类型">
          <el-select v-model="form.type" placeholder="请选择">
            <el-option label="文本" value="text" />
            <el-option label="数字" value="number" />
            <el-option label="日期" value="date" />
            <el-option label="图片" value="image" />
          </el-select>
        </el-form-item>
        <el-form-item label="可见性">
          <el-switch v-model="form.isShow" active-text="显示" inactive-text="隐藏" />
        </el-form-item>
        <el-form-item label="应用于">
          <el-checkbox-group v-model="form.usage">
            <el-checkbox label="search">搜索</el-checkbox>
            <el-checkbox label="add">新增</el-checkbox>
            <el-checkbox label="edit">修改</el-checkbox>
            <el-checkbox label="export">导出</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="saveField">保存字段</el-button>
          <el-button @click="resetForm">重置</el-button>
        </el-form-item>
      </el-form>

      <!-- 字段列表（根据当前树节点过滤） -->
      <div style="margin-top: 20px;">
        <el-table :data="filteredFields" border size="small">
          <el-table-column prop="label" label="字段名称" />
          <el-table-column prop="key" label="字段key" />
          <el-table-column prop="type" label="类型" />
          <el-table-column label="可见">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.isShow" type="success">是</el-tag>
              <el-tag v-else type="info">否</el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="usage" label="用途">
            <template slot-scope="scope">
              <el-tag
                v-for="u in scope.row.usage"
                :key="u"
                size="mini"
                type="info"
                style="margin-right: 4px;"
              >{{ u }}</el-tag>
            </template>
          </el-table-column>
        </el-table>
      </div>

      <!-- JSON 预览 -->
      <div style="margin-top: 30px;">
        <h4>JSON 配置预览：</h4>
        <pre>{{ formattedJson }}</pre>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      activeNode: null,
      treeData: [
        {
          id: 'table',
          label: "表格配置",
          icon: "el-icon-s-grid",
          children: [],
        },
        {
          id: 'actionBtns',
          label: "操作栏按钮配置",
          icon: "el-icon-setting",
        },
        {
          id: 'toolbar',
          label: "普通按钮配置",
          icon: "el-icon-menu",
          children: [
            { id: 'search', label: "搜索区", icon: "el-icon-search" },
            { id: 'add', label: "新增按钮", icon: "el-icon-circle-plus" },
            { id: 'export', label: "导出按钮", icon: "el-icon-upload2" },
          ],
        },
      ],
      treeProps: {
        label: "label",
        children: "children",
      },
      form: {
        label: "",
        key: "",
        type: "text",
        isShow: true,
        usage: [],
      },
      fields: [],
    };
  },
  computed: {
    filteredFields() {
      if (!this.activeNode || !this.activeNode.id) return this.fields;
      const usageKey = this.activeNode.id;
      return this.fields.filter((f) => f.usage.includes(usageKey));
    },
    formattedJson() {
      return JSON.stringify(this.fields, null, 2);
    },
  },
  methods: {
    handleNodeClick(node) {
      this.activeNode = node;
      if (node.id.startsWith("table_")) {
        const key = node.id.replace("table_", "");
        const field = this.fields.find((f) => f.key === key);
        if (field) {
          this.form = { ...field };
        }
      }
    },
    saveField() {
      const existing = this.fields.find((f) => f.key === this.form.key);
      if (existing) {
        Object.assign(existing, this.form);
      } else {
        this.fields.push({ ...this.form });

        // 添加子节点到“表格配置”
        if (this.activeNode && this.activeNode.id === "table") {
          const tableNode = this.treeData.find((n) => n.id === "table");
          const newChildId = `table_${this.form.key}`;
          const exists = tableNode.children?.some(child => child.id === newChildId);
          if (!exists) {
            tableNode.children.push({
              id: newChildId,
              label: this.form.label,
              icon: "el-icon-document",
            });
          }
        }
      }
      this.resetForm();
    },
    resetForm() {
      this.form = {
        label: "",
        key: "",
        type: "text",
        isShow: true,
        usage: [],
      };
    },
  },
};
</script>

<style scoped>
pre {
  background-color: #f5f5f5;
  padding: 10px;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 4px;
}
</style>
